<template>
    <view class="summary-box">
        <block v-for="(item,index) in orderSummaryArr" :key="item.id">
            <view class="summary-item">
			   <!-- header -->
               <view class="summary-header">
					<view class="left">
						<text>订单号</text>	
						<!-- 动态数据 -->
						<text>{{item.order_no}}</text>			  
					</view> 
					<view class="right">
						<!-- 动态数据 -->
						<text>下单于{{item.create_time}}</text>
					</view> 
			   </view> 
			   
			   <!-- body -->
			   <view class="summary-body">
				   <!-- 上 -->
				   <view class="header">
						<view>我</view>
						<text>-{{item.first_route}}km-</text>
						<view>取</view>
						<text>-{{item.sec_route}}km-</text>
						<view>送</view>
				   </view>
				   <!-- 中 -->
					<view class="body">
						<view class="shop">取</view>
						<!-- 动态数据 -->
						<text>{{item.shop.shop_address}}</text>
					</view>
						
				    <!-- 下 -->
					<view class="footer">
						<view class="user">送</view>
						<!-- 动态数据 -->
						<text>{{item.recieve_address}}</text>
					</view>
			   </view>
			   
			   <!-- footer -->
			   <view class="summary-footer">
				   <text>
					   <!-- 动态数据 -->
					   订单内容:{{item.order_content}}
				   </text>
				   <!-- 给事件传单个参 id为数组的index v-bind:id="index" -->
				   <!-- <view class="btn" @click="grabOrder" v-bind:id="index">抢单</view> -->
				   <!-- 事件传多个参 1.订单号 2.orderSummaryArr数组的索引 -->
				   <view class="btn" @click="grabOrder(item.id,index,item.order_no)">抢单</view>
			   </view>
            </view>
        </block>
    </view>
</template>

<script>
	// 引用公共函数
	import util from '../../utils/util.js'
	
	export default {
		props: ['orderSummaryArr'],
		methods:{
			// 事件监听
			grabOrder(id,index,no){
				// console.log(id);
				// console.log(index);
				// 第一个参数表示要删掉的位置,第二个参数表示删掉的个数
				//this.orderSummaryArr.splice(index,1);
				// console.log(this.orderSummaryArr);
				
				//上传抢单成功
				var data = {
					usertoken:uni.getStorageSync('usertoken'),
					orderno:no
				};
				console.log(data);
				//包含身份，对应的订单号
				util.post('/horseman/graborder',data,(res) => {
					console.log(res);
				});
			}
		}
	}
</script>

<style lang="scss">
	
.summary-box{
	margin:20rpx 20rpx 0rpx 20rpx;
	display: flex;
	flex-direction: column;
	// item包含header body footer
	.summary-item{
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		min-height: 400rpx;
		width: 100%;
		border-radius: 10rpx;
		background-color: #F5F6F5;
		font-size: 32rpx;
		//header
		.summary-header{
			margin:10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			
			.left{
				display:flex;
				flex-direction: column;
				width:60%;
			}
			
			.right{
				display:flex;
				flex-direction: column;
				width:40%;
			}
		}
		
		//body包含header body footer
		.summary-body{
			margin: 10rpx;
			border-top: 1rpx solid #929292;
			border-bottom: 1rpx solid #929292;
			display: flex;
			flex-direction: column;
			
			.header{
				margin: 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
			.body{
				margin: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.shop{
					margin-right: 20rpx;
					width: 50rpx;
					height: 50rpx;
					border-radius: 10rpx;
					background-color: #61A6E6;
					border:1rpx solid #61A6E6;
					text-align: center;   //文字横坐标居中
					line-height: 50rpx;   //文字纵坐标居中,和容器的高度一致
					color: white;
				}
			}
			
			.footer{
				margin: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.user{
					margin-right: 20rpx;
					width:50rpx;
					height:50rpx;
					border-radius: 10rpx;
					background-color: #FF6622;
					border:1rpx solid #FF6622;
					text-align: center;   //文字横坐标居中
					line-height: 50rpx;   //文字纵坐标居中,和容器的高度一致
					color: white;
				}
			}
			
		}
		
		//footer
		.summary-footer{
			margin: 10rpx;
			display: flex;
			flex-direction: column;
			.btn{
				margin: 10rpx;
				width: 50%;
				height: 60rpx;
				border-radius: 10rpx;
				background-color: #FF6622;
				border:1rpx solid #FF6622;
				color: white;
				align-self: center;
				text-align: center;   //文字横坐标居中
				line-height: 60rpx;   //文字纵坐标居中,和容器的高度一致
			}
		}
	}
}

.summary-body .header > view{
	width:50rpx;
	height:50rpx;
	border-radius: 10rpx;
	background-color: #FF6622;
	border:1rpx solid #FF6622;
	color: white;
	text-align: center;
	line-height: 50rpx;
}
</style>
